<template>
	<view>
		<view class="my-xinxi">
			<view>
				<view class="my-xinxi-head-portrait">
					<image src="../../static/my/my-xinxi-head-portrait.png" mode="" ></image>
				</view>
				<view class="my-xinxi-name">
					<view>萧敬腾</view>
					<view style="margin-top: 20rpx;">13669946632</view>
				</view>
			</view>
		</view>
		<view>
		<view class="list" v-for="(item,index) in arr" @click="router(index)">
			<view>
			<view class="list-xinxi">
				{{item.name}}
			</view>
			<view style="margin-left: auto;">
				{{item.title}}
			</view>
			<view class="list-more">
				<image :src="item.img" mode="" ></image>
			</view>
		</view>
		</view>
	</view>
	<view>
		<view class="list1" v-for="(item,index) in arr1" @click="btn(index)">
			<view>
			<view class="list-xinxi">
				{{item.name}}
			</view>
			<view class="list-more">
				<image :src="item.img" mode="" ></image>
			</view>
		</view>
		</view>
	</view>
	<view style=" width: 500rpx; margin: 0 auto;"><button type="default" style="color: #18B566;background-color: #FFFFFF;margin-top: 20rpx;">安全退出</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[
					{name:'实名认证',title:'已认证',img:'../../static/my/@1x图标.png'},
					{name:'手机绑定',title:'11111111111',img:'../../static/my/@1x图标.png'},
					{name:'银行卡设置',title:'未设置',img:'../../static/my/@1x图标.png'}
				],
				arr1:[
					{name:'设置交易密码',img:'../../static/my/@1x图标.png'},
					{name:'找回交易密码',img:'../../static/my/@1x图标.png'},
					{name:'修改交易密码',img:'../../static/my/@1x图标.png'}
				],
			}
		},
		methods: {
			router(index){
				if(index == 0){
					uni.navigateTo({
						url:"../autonym/autonym"
					})
				}
				if(index == 1){
					
				}
				if(index == 2){
					uni.navigateTo({
						url:'../card/card'
					})
				}
			},
			btn(index){
				if(index == 0){
					uni.navigateTo({
						url:'../password/password'
					})
				}
				if(index == 1){
					uni.navigateTo({
						url:'../password/get'
					})
				}
				if(index == 2){
					uni.navigateTo({
						url:'../password/amend'
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
.my-xinxi{
	width: 750rpx;
	height: 462rpx;
	background: url(../../static/my/mybackground.png) no-repeat;
	background-size: 100% 100%;
	
}
.my-xinxi>view{
	height: 462rpx;
	display: flex;
	align-items: center;
	width: 90%;
	margin: 0 auto;
}
.my-xinxi-head-portrait{
	width: 200rpx;
	height: 200rpx;
	}
.my-xinxi-head-portrait>image{
	width: 100%;
	height: 100%;

}	
.my-xinxi-name{
	color: #FFFFFF;
	margin-left: 40rpx;
	font-size: 40rpx;
}
.list{
	margin-top: 8rpx;
	font-size: 34rpx;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #FFFFFF;
}
.list:first-child{
	margin-top: 40rpx;
}
.list1{
	margin-top: 8rpx;
	font-size: 34rpx;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #FFFFFF;
}
.list1:first-child{
	margin-top: 40rpx;
}
.list:nth-child(2)>view>view:nth-child(2){
	color: #18B566;
}
.list>view{
	margin: 0 auto;
	width: 90%;
	display: flex;
	justify-content: flex-start;
}
.list1>view{
	margin: 0 auto;
	width: 90%;
	display: flex;
	justify-content: space-between;
}
.list-label{
	margin-top: 12rpx;
	width:58rpx;
	height: 58rpx;
}
.list-xinxi{
	margin-left: 20rpx;
}
.list-more{
	margin-left: 30rpx;
	width:16rpx;
	height: 26rpx;
}
.list-more>image{
	width: 100%;
	height: 100%;
	}
</style>
